<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Single Long List</title>
</head>
<body>
</body>
<script>
  const container = document.createElement('div');
  // 修改 display 为 sliver.
  container.style.display = 'sliver';
  // 必须指定渲染容器节点滚动方向的尺寸(height).
  container.style.height = '60vh';

  // 创建 10000 个子节点.
  for (let i = 0; i < 1000; i++) {
    const ele = document.createElement('div');
    ele.style.background = i % 2 ? '#fff' : '#e6e6e6';
    // Sliver 元素默认滚动方向为垂直方向
    // 它的子元素在水平方向上的尺寸(width)会被自动撑满.
    ele.style.padding = '35rpx 60rpx';
    ele.appendChild(document.createTextNode(i));
    container.appendChild(ele);
  }

  document.body.appendChild(container);
</script>
</html>
